<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .tablebox {
      height: 500px;
      overflow: hidden;
      position: relative;
      width: 1000px;
      margin: 100px auto;
      background-color: rgba(6, 26, 103, 1);
    }

    .tbl-header {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
    }

    .tbl-body {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      transition: 1s linear;
    }

    .tablebox table {
      width: 100%;
    }

    .tablebox table th,
    .tablebox table td {
      font-size: 24px;
      color: #7ca6f4;
      line-height: 45px;
      text-align: center;
    }

    .tablebox table tr th {
      background-color: #1f1f9c;
      cursor: pointer;
    }

    .tablebox table tr td {
      background-color: transparent;
    }

    .tbl-body tr:nth-child(even) td,
    .tbl-body1 tr:nth-child(even) td {
      background-color: rgba(31, 31, 156, .5);
    }

    .tablebox table tr td span,
    .tablebox table tr td span {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="tablebox">
      <!-- 表头容器 -->
      <div class="tbl-header">
        <table border="0" cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <th>排名</th>
              <th>地市</th>
              <th>销售收入(万元)</th>
              <th>同比(%)</th>
              <th>环比(%)</th>
              <th>销售计划(万元)</th>
              <th>计划完成率(%)</th>
            </tr>
          </thead>
          <tbody style="opacity:0;"></tbody>
        </table>
      </div>
      <!-- 表格内容容器-->
      <div class="tbl-body" ref="table">
        <table border="0" cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <th>排名</th>
              <th>地市</th>
              <th>销售收入(万元)</th>
              <th>同比(%)</th>
              <th>环比(%)</th>
              <th>销售计划(万元)</th>
              <th>计划完成率(%)</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in items" :key="index">
              <td>{{item.Ranking}}</td>
              <td>{{item.City}}</td>
              <td>{{item.SaleIncome}}</td>
              <td>{{item.SaleRough}}</td>
              <td>{{item.SalePlan}}</td>
              <td>{{item.PlanFinish}}</td>
              <td>{{item.OilTransform}}</td>
            </tr>>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script src="vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        items : [{
            "Ranking": "1",
            "City": "保定",
            "SaleIncome": "2506734.43",
            "SaleRough": "296071.96",
            "SalePlan": "7200000",
            "PlanFinish": "34.82",
            "TonOilincome": "264.15",
            "OilTransform": "29.62",
            "An": "53.00",
            "Mom": "-13.00"
          },
          {
            "Ranking": "2",
            "City": "沧州",
            "SaleIncome": "1425935.58",
            "SaleRough": "93717.83",
            "SalePlan": "3200000",
            "PlanFinish": "44.56",
            "TonOilincome": "366.59",
            "OilTransform": "11.23",
            "An": "65.00",
            "Mom": "43.00"
          },
          {
            "Ranking": "3",
            "City": "秦皇岛",
            "SaleIncome": "1372207.38",
            "SaleRough": "241071.82",
            "SalePlan": "3000000",
            "PlanFinish": "45.74",
            "TonOilincome": "342.32",
            "OilTransform": "6.61",
            "An": "34.00",
            "Mom": "7.00"
          },
          {
            "Ranking": "4",
            "City": "衡水",
            "SaleIncome": "972451.15",
            "SaleRough": "87638.60",
            "SalePlan": "2700000",
            "PlanFinish": "36.02",
            "TonOilincome": "246.03",
            "OilTransform": "11.56",
            "An": "15.00",
            "Mom": "-18.00"
          },
          {
            "Ranking": "5",
            "City": "石家庄",
            "SaleIncome": "939010.52",
            "SaleRough": "140217.37",
            "SalePlan": "7200000",
            "PlanFinish": "13.04",
            "TonOilincome": "139.44",
            "OilTransform": "19.23",
            "An": "-57.00",
            "Mom": "-48.00"
          },
          {
            "Ranking": "6",
            "City": "邢台",
            "SaleIncome": "774274.70",
            "SaleRough": "124693.90",
            "SalePlan": "3700000",
            "PlanFinish": "20.93",
            "TonOilincome": "138.87",
            "OilTransform": "9.44",
            "An": "-20.00",
            "Mom": "-44.00"
          },
          {
            "Ranking": "7",
            "City": "唐山",
            "SaleIncome": "680456.79",
            "SaleRough": "50542.14",
            "SalePlan": "3600000",
            "PlanFinish": "18.90",
            "TonOilincome": "243.60",
            "OilTransform": "16.95",
            "An": "-29.00",
            "Mom": "-49.00"
          },
          {
            "Ranking": "8",
            "City": "张家口",
            "SaleIncome": "613319.87",
            "SaleRough": "176075.96",
            "SalePlan": "3000000",
            "PlanFinish": "20.44",
            "TonOilincome": "87.09",
            "OilTransform": "7.97",
            "An": "2.00",
            "Mom": "-24.00"
          },
          {
            "Ranking": "9",
            "City": "中油华奥",
            "SaleIncome": "596575.25",
            "SaleRough": "387024.26",
            "SalePlan": "11000000",
            "PlanFinish": "5.42",
            "TonOilincome": "93.58",
            "OilTransform": "19.06",
            "An": "35.00",
            "Mom": "6.00"
          },
          {
            "Ranking": "10",
            "City": "承德",
            "SaleIncome": "589048.12",
            "SaleRough": "68966.73",
            "SalePlan": "2200000",
            "PlanFinish": "26.77",
            "TonOilincome": "193.24",
            "OilTransform": "11.29",
            "An": "30.00",
            "Mom": "-28.00"
          },
          {
            "Ranking": "11",
            "City": "廊坊",
            "SaleIncome": "515448.14",
            "SaleRough": "137934.72",
            "SalePlan": "3500000",
            "PlanFinish": "14.73",
            "TonOilincome": "95.47",
            "OilTransform": "8.80",
            "An": "-48.00",
            "Mom": "-3.00"
          },
          {
            "Ranking": "12",
            "City": "瑞州",
            "SaleIncome": "399875.26",
            "SaleRough": "85371.46",
            "SalePlan": "2000000",
            "PlanFinish": "19.99",
            "TonOilincome": "114.42",
            "OilTransform": "11.42",
            "An": "128.00",
            "Mom": "-30.00"
          },
          {
            "Ranking": "13",
            "City": "石家庄中油",
            "SaleIncome": "90543.62",
            "SaleRough": "20065.14",
            "SalePlan": "430000",
            "PlanFinish": "21.06",
            "TonOilincome": "213.44",
            "OilTransform": "20.45",
            "An": "-24.00",
            "Mom": "-17.00"
          },
          {
            "Ranking": "14",
            "City": "辛集中油",
            "SaleIncome": "49255.52",
            "SaleRough": "8743.12",
            "SalePlan": "250000",
            "PlanFinish": "19.70",
            "TonOilincome": "202.67",
            "OilTransform": "29.95",
            "An": "19.00",
            "Mom": "-6.00"
          },
          {
            "Ranking": "15",
            "City": "井陉中油",
            "SaleIncome": "29682.60",
            "SaleRough": "2175.66",
            "SalePlan": "140000",
            "PlanFinish": "21.20",
            "TonOilincome": "730.20",
            "OilTransform": "25.55",
            "An": "-74.00",
            "Mom": "-52.00"
          },
          {
            "Ranking": "16",
            "City": "保定中油",
            "SaleIncome": "11887.73",
            "SaleRough": "2944.97",
            "SalePlan": "100000",
            "PlanFinish": "11.89",
            "TonOilincome": "118.12",
            "OilTransform": "34.16",
            "An": "-64.00",
            "Mom": "-72.00"
          }
        ],
        n:0,
      },
      mounted() {
        setInterval(()=>{
          this.$refs.table.style.top = this.n*-45 +'px';
          this.n++
          if(this.items.length - this.n<10){
            this.items = this.items.concat(this.items);
          }
        },1000)
      },
      methods: {

      },
    })
  </script>
</body>

</html>